<script setup>
import { ref, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { IconLeft } from '@arco-design/web-vue/es/icon'

const $route = useRoute()
const $router = useRouter()

const echartsPieInit = async () => {
  var chartDom = document.getElementById('echarts_pie')
  var myChart = echarts.init(chartDom)
  var option = {
    title: {
      text: '8分',
      top: '20%',
      left: '62%',
      textStyle: {
        fontSize: 30,
      },
    },
    tooltip: {
      trigger: 'item',
      show: true,
    },
    legend: {
      top: '60%',
      right: '5%',
      icon: 'circle', // 设置图例为圆点
      orient: 'vertical',
    },
    series: [
      {
        name: '得分',
        type: 'pie',
        radius: ['60%', '100%'],
        center: ['26%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 0,
          borderColor: '#fff',
          borderWidth: 0,
        },
        label: {
          position: 'outer',
          formatter: '{cStyle|{c}}',
          backgroundColor: '#fff',
          borderRadius: 50,
          width: 30,
          height: 30,
          rich: {
            cStyle: {
              fontSize: 18,
              fontWeight: 'bold',
              align: 'center',
              lineHeight: 36,
            },
          },
        },
        labelLine: {
          length: -35,
          show: true,
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        data: [
          { value: 5, name: '基本情况', itemStyle: { color: '#57BEF8' } },
          { value: 3, name: '工作经验', itemStyle: { color: '#FB9515' } },
        ],
      },
    ],
  }

  option && myChart.setOption(option)
}

nextTick(() => {
  echartsPieInit()
})
</script>

<template>
  <div class="page">
    <div class="btn_back">
      <icon-left />返回
    </div>

    <div>
      <div class="body_left">
        <div class="member_cell">
          <div class="member_avatar">
            <img src="https://yunpin-video-record.oss-cn-shanghai.aliyuncs.com/zhixue/image/20241020/2849b799755badff5c55c60d97b0e2ec13157862041efc7c791bfaa341002b7f.png"
                 alt="">
          </div>
          <div class="member_info">
            <div class="name hang1">面试名字面试名字面试名字</div>
            <div class="desc">额外信息等</div>
            <div class="status">离职-随时到岗</div>
          </div>
          <div class="member_extra_info">
            <div>
              <div>期望薪资</div>
              <div>5000+</div>
            </div>
            <div>
              <div>联系电话</div>
              <div>15020330491</div>
            </div>
            <div>
              <div>联系邮箱</div>
              <div>962738643@qq.com</div>
            </div>
            <div>
              <div>备注</div>
              <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
            </div>
          </div>
          <div class="btn_downLoad">下载简历</div>
        </div>

        <div class="yujing_cell">
          <div class="title">录取预警</div>
          <div class="desc">本轮面试需注意的事项：录取预警录取预警录取预警录取预警录取预警录取预警录取预警</div>
        </div>

        <div class="interview_body">
          <div class="interview_body_left">
            <div class="interview_cell interview_cell_active">
              <div class="title">>>第一次面试</div>
              <div class="time mb5">预约时间：2024-09-27 14:00</div>
              <div class="time">实际时间：2024-09-27 13:30</div>
              <div class="mark">备注：此处备注此处备注此处备注此处</div>
            </div>

            <div class="interview_cell ">
              <div class="title">>>第二次面试</div>
              <div class="time mb5">预约时间：2024-09-27 14:00</div>
              <div class="time">实际时间：2024-09-27 13:30</div>
              <div class="mark">备注：此处备注此处备注此处备注此处</div>
            </div>
          </div>

          <div class="table_body">
            <div class="table_head">
              <div class="w1">问题及考核要点</div>
              <div class="w2">面试回答</div>
              <div class="w3">得分</div>
            </div>
            <div class="table_container">
              <div class="table_th"
                   v-for="(item,index) in 2"
                   :key="index">
                <div class="w1">
                  <div class="weidu">基本情况（5/6）</div>
                  <div class="wenti">家庭住址<span>（市区优先考虑）</span></div>
                  <div class="wenti">婚姻情况<span>（已婚未婚/婚假/产假）</span></div>
                </div>
                <div class="w2">
                  <div class="kong"></div>
                  <div class="answer">市中区</div>
                  <div class="answer">未婚未育</div>
                </div>
                <div class="w3">
                  <div class="kong"></div>
                  <div class="flex at_c mb10" style="height: 20px">
                    <a-progress :percent="0.66"
                                color="#5695FB"
                                track-color="#eeeeee"
                                stroke-width="10"
                                :style="{width:'100%'}">
                      <template v-slot:text="scope">
                        3
                      </template>
                    </a-progress>
                  </div>
                  <div class="flex at_c mb10" style="height: 20px">
                    <a-progress :percent="0.66"
                                color="#5695FB"
                                track-color="#eeeeee"
                                stroke-width="10"
                                :style="{width:'100%'}">
                      <template v-slot:text="scope">
                        3
                      </template>
                    </a-progress>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="clear"></div>
        </div>
      </div>

      <div class="body_right">
        <div class="block_cell">
          <div class="title">岗位信息</div>
          <div class="block_body">
            <div class="info_cell flex">
              <div>招聘部门：</div>
              <div>IT部门</div>
            </div>
            <div class="info_cell flex">
              <div>岗位名称：</div>
              <div>前端工程师</div>
            </div>
            <div class="info_cell">
              <div>岗位要求：</div>
              <div class="mt15">IT部门</div>
            </div>
          </div>
        </div>

        <div class="block_cell">
          <div class="title">整体评分</div>
          <div class="block_body">
            <div id="echarts_pie"></div>
            <div class="btns">
              <div class="btn_luqu">录取</div>
              <div class="btn_taotai">淘汰</div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
  box-sizing: border-box;
  padding: 20px 24px;
}

.btn_back {
  width: 104px;
  height: 37px;
  background: #5695fb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding-left: 24px;
  font-weight: 400;
  font-size: 15px;
  color: #ffffff;
  user-select: none;
  cursor: pointer;
  margin-bottom: 20px;
}

.body_left {
  float: left;
  width: calc(100% - 324px);
}

.body_right {
  float: right;
  width: 300px;
}

.clear {
  clear: both;
}

.member_cell {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 26px 180px 26px 10px;
  display: flex;
}

.member_avatar {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  background-color: #f6f6f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.member_avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.member_info {
  width: 165px;
  flex-shrink: 0;
  margin-right: 50px;
}

.member_info .name {
  font-weight: 400;
  font-size: 24px;
  color: #000000;
  margin: 11px 0 13px;
}

.member_info .desc {
  font-weight: 400;
  font-size: 14px;
  color: #888888;
  margin-bottom: 10px;
}

.member_info .status {
  width: 100%;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5695fb;
  border-radius: 10px;
  font-weight: 400;
  font-size: 15px;
  color: #ffffff;
}

.member_extra_info {
}

.member_extra_info > div {
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  display: flex;
}

.member_extra_info > div > div:first-child {
  width: 60px;
  text-align: justify;
  flex-shrink: 0;
  margin-right: 3px;
}

.member_extra_info > div > div:first-child::after {
  content: '';
  display: inline-block;
  width: 100%;
}

.member_extra_info > div > div:last-child {
  word-break: break-all;
  box-sizing: border-box;
  padding-left: 8px;
  position: relative;
}

.member_extra_info > div > div:last-child::before {
  content: ':';
  position: absolute;
  left: -2px;
}

.btn_downLoad {
  position: absolute;
  top: 67px;
  right: 0;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  box-sizing: border-box;
  padding: 12px 28px;
  border-top: 1px solid #898989;
  border-left: 1px solid #898989;
  border-bottom: 1px solid #898989;
  background-color: #eeeeee;
  border-radius: 25px 0 0 25px;
  user-select: none;
  cursor: pointer;
}

.yujing_cell {
  width: 100%;
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 26px 26px;
}

.yujing_cell .title {
  font-size: 16px;
  color: #fb9515;
  margin-bottom: 17px;
  font-weight: bolder;
}

.yujing_cell .desc {
  font-weight: 400;
  font-size: 13px;
  color: #000000;
}

.block_cell {
  width: 100%;
  border-radius: 10px;
}

.block_cell:not(:first-child) {
  margin-top: 20px;
}

.block_cell .title {
  width: 100%;
  height: 43px;
  background: linear-gradient(66deg, #8bb6fd, #eaf5ff);
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 23px;
  border-radius: 10px 10px 0 0;
}

.block_body {
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
  padding: 20px 24px;
}

.block_body .info_cell {
  margin-bottom: 10px;
}

.block_body .info_cell > div:first-child {
  font-weight: bolder;
  font-size: 14px;
  color: #000000;
}

.block_body .info_cell > div:last-child {
  font-weight: 400;
  font-size: 14px;
  color: #000000;
}

#echarts_pie {
  width: 100%;
  height: 120px;
  /* background-color: #ffadad; */
}

.block_body .btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.block_body .btns > div {
  width: 83px;
  height: 37px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}

.block_body .btn_luqu {
  font-weight: 400;
  font-size: 15px;
  color: #ffffff;
  background-color: #5695fb;
  border: 1px solid #5695fb;
  margin-right: 18px;
}

.block_body .btn_taotai {
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  background-color: #f6f6f6;
  border: 1px solid #a7a7a7;
}

.interview_body {
  margin-top: 20px;
}

.interview_body_left {
  float: left;
  width: 300px;
}

.interview_cell {
  width: 300px;
  background-color: #fff;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #fff;
  cursor: pointer;
}

.interview_cell_active {
  position: relative;
  border-color: #5695fb;
}

.interview_cell_active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -15px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 15px solid #5695fb;
  border-bottom: 10px solid transparent;
}

.interview_cell .title {
  font-weight: bold;
  font-size: 15px;
  color: #666666;
  margin-bottom: 16px;
}

.interview_cell_active .title {
  color: #5695fb;
}

.interview_cell .time {
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  box-sizing: border-box;
  padding: 4px 6px;
  background-color: #f6f6f6;
}

.interview_cell .mark {
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  margin-top: 20px;
}

.table_body {
  float: right;
  width: calc(100% - 324px);
  border-radius: 10px;
  background-color: #fff;
}

.table_body .table_head {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #cfcbcb;
}

.table_body .w1 {
  width: 40%;
  box-sizing: border-box;
  padding: 0 26px;
}

.table_body .w2 {
  width: 30%;
  text-align: center;
}

.table_body .w3 {
  width: 30%;
  text-align: center;
}

.table_container {
  box-sizing: border-box;
  padding: 0 26px;
}

.table_container .w1 {
  padding: 0 20px 0 0;
}

.table_container .w2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 20px;
}

.table_container .w3 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 20px;
}

.table_th {
  display: flex;
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px dashed #7b7575;
}

.table_th .weidu {
  font-weight: bold;
  font-size: 13px;
  color: #3b81f3;
  margin-bottom: 10px;
}

.table_th .wenti {
  font-weight: 400;
  font-size: 13px;
  color: #000000;
  margin-bottom: 10px;
}

.table_th .kong {
  width: 100%;
  height: 18px;
}

.table_th .answer {
  width: 100%;
  border: 1px solid #dadada;
  height: 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>